<template>
  <div class="message-board">
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <span>亲子留言板</span>
      </div>

      <!-- 1. 留言列表（按时间倒序） -->
      <div class="message-list">
        <div 
          class="message-item" 
          v-for="(item, index) in messageList" 
          :key="index"
          :class="item.senderRole === 'student' ? 'student-message' : 'parent-message'"
        >
          <!-- 发送者头像+角色 -->
          <div class="sender-info">
            <el-avatar :icon="item.senderRole === 'student' ? 'el-icon-user' : 'el-icon-user-circle'"></el-avatar>
            <span class="sender-role">
              {{ item.senderRole === 'student' ? '我（学生）' : '家长' }}
            </span>
            <span class="send-time">{{ formatTime(item.createTime) }}</span>
          </div>
          <!-- 留言内容 -->
          <div class="message-content">{{ item.content }}</div>
        </div>
        <!-- 无留言时提示 -->
        <div class="no-message" v-if="messageList.length === 0">
          暂无留言，开始互动吧～
        </div>
      </div>

      <!-- 2. 发送留言框 -->
      <div class="send-box">
        <el-input
          type="textarea"
          v-model="messageContent"
          placeholder="请输入留言内容"
          rows="3"
          maxlength="500"
        ></el-input>
        <el-button 
          type="primary" 
          class="send-btn"
          @click="sendMessage"
          :disabled="!messageContent.trim()"
        >
          发送留言
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { simpleFormatTime } from '@/utils/date'; // 自己封装的时间格式化工具

export default {
  name: 'MessageBoard',
  data() {
    return {
      messageList: [
        // 静态测试数据
        {
          senderRole: 'student',
          content: '妈妈，今天学校举办了运动会，我参加了100米短跑，拿了第一名！',
          createTime: '2024-10-15 14:30:00'
        },
        {
          senderRole: 'parent',
          content: '太棒了宝贝！妈妈为你骄傲！要注意休息，别太累了。',
          createTime: '2024-10-15 19:15:00'
        },
        {
          senderRole: 'student',
          content: '谢谢妈妈！我会注意的。对了，明天有数学考试，有点紧张。',
          createTime: '2024-10-15 20:45:00'
        }
      ], // 留言列表
      messageContent: '', // 待发送内容
      studentId: '' // 当前关联的学生ID
    };
  },
  created() {
    // 暂时移除从localStorage获取用户信息的逻辑，使用静态数据
    console.log('MessageBoard component created');
  },
  methods: {
    // 加载留言列表（暂时不调用API）
    loadMessageList() {
      // 静态数据已经定义在data中，无需额外加载
    },

    // 发送留言（暂时不调用API）
    sendMessage() {
      if (this.messageContent.trim()) {
        // 添加新留言到列表（模拟发送成功）
        const newMessage = {
          senderRole: 'student', // 默认当前用户为学生
          content: this.messageContent.trim(),
          createTime: new Date().toLocaleString('zh-CN', { 
            year: 'numeric', 
            month: '2-digit', 
            day: '2-digit', 
            hour: '2-digit', 
            minute: '2-digit',
            hour12: false
          }).replace(/\//g, '-').replace(',', '')
        };
        
        this.messageList.unshift(newMessage); // 添加到列表顶部
        this.messageContent = ''; // 清空输入框
        this.$message.success('发送成功');
      }
    },

    // 格式化时间
    formatTime(time) {
      return simpleFormatTime(time);
    }
  }
};
</script>

<style scoped lang="scss">
.message-board {
  padding: 20px;
  .message-list {
    margin: 20px 0;
    max-height: 400px;
    overflow-y: auto; // 滚动显示更多留言
    .message-item {
      margin-bottom: 15px;
      padding: 10px;
      border-radius: 8px;
      &.student-message {
        background: #f5f7fa; // 学生留言背景
        margin-right: 20px;
      }
      &.parent-message {
        background: #e6f7ff; // 家长留言背景
        margin-left: 20px;
      }
    }
    .sender-info {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      .sender-role {
        margin: 0 10px;
        font-size: 14px;
        color: #666;
      }
      .send-time {
        font-size: 12px;
        color: #999;
        margin-left: auto;
      }
    }
    .message-content {
      font-size: 14px;
      color: #333;
      line-height: 1.5;
    }
    .no-message {
      text-align: center;
      color: #999;
      padding: 30px 0;
    }
  }
  .send-box {
    .send-btn {
      margin-top: 10px;
      float: right;
    }
  }
}
</style>